<template>
	<div>
		<div class="table">
			<el-table
				:data="stu || stuInfo"
				:header-cell-style="{ backgroundColor: '#00B4D422', color: '#000' }"
				:row-style="tableRowClassName"
				:fit="true">
				<el-table-column prop="stuName" label="姓名" />
				<el-table-column prop="stuId" label="学号" />
				<el-table-column prop="sex" label="性别">
					<template #default="{ row }">
						{{ row.sex == 1 ? '男' : row.sex == 2 ? '女' : '未知' }}
					</template>
				</el-table-column>
				<el-table-column prop="college" label="学院" />
				<el-table-column prop="profession" label="专业" />
				<el-table-column prop="buildId" label="楼栋号" />
				<el-table-column prop="dormitory" label="寝室号" />
				<el-table-column prop="bed" label="床位(号)" />
				<el-table-column prop="email" label="邮箱" />
				<el-table-column prop="phone" label="电话" />

				<el-table-column label="操作">
					<template #default="{ row }">
						<el-button type="danger" link @click="handleClick(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 分页 -->
		<el-row class="pagination">
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:page-sizes="pageSizes"
				small="small"
				:background="true"
				layout="total, sizes, prev, pager, next"
				:total="stu?.length||total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</el-row>

		<!-- 删除学生对话框 -->
		<DeleteDialog v-model:show="showDelDialog">
			<template #containt>
				{{ target.stuName }}
			</template>
			<template #btn>
				<el-button type="primary" link @click="showDelDialog = false">取消</el-button>
				<el-button type="danger" link @click="handleDelStu">确认删除</el-button>
			</template>
		</DeleteDialog>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getAllStuInfoByMaster,deleteStuId } from '@/utils/axios/master'
import DeleteDialog from '../dialog/DeleteDialog.vue'
import { getStuCount } from '@/utils/axios/getTotal'
import { debounce } from '@/utils/tools'

const currentPage = ref(1)
const pageSize = ref(10)
const pageSizes = reactive([10, 20, 30])
const stuInfo = ref([])
defineProps(['stu'])

// 分页总数
const total = ref(0)
// 删除目标
const target = ref({})

// 显示删除对话框
const showDelDialog = ref(false)

const handleSizeChange = async (val) => {
	let { data } = await getAllStuInfoByMaster({ currentPage:currentPage.value, pageSize: val })
	stuInfo.value = data
}

const handleCurrentChange = async (val) => {
	let { data } = await getAllStuInfoByMaster({ currentPage: val, pageSize: pageSize.value })
	stuInfo.value = data
}

// 添加表格样式
const tableRowClassName = ({ row, rowIndex }) => {
	if (rowIndex % 2 === 1) {
		return { backgroundColor: '#00B4D411' }
	}
	return ''
}

// 处理删除学生申请
const handleClick = (row) => {
	target.value = row
	showDelDialog.value = true
}
const handleDelStu = debounce(async() => {
	await deleteStuId(target.value)
	let { data } = await getAllStuInfoByMaster({ currentPage: currentPage.value, pageSize: pageSize.value })
	let res = await getStuCount()
	total.value = res.data
	stuInfo.value = data
	showDelDialog.value=false
})

// 加载数据
onMounted(async () => {
	let { data } = await getAllStuInfoByMaster({ currentPage: currentPage.value, pageSize: pageSize.value })
	let res = await getStuCount()
	total.value = res.data
	stuInfo.value = data
})
</script>

<style scoped lang="scss">
.text {
	letter-spacing: 2px;
	color: #ccc;
}
.stuName {
	color: rgb(0, 202, 237);
	font-style: oblique;
}
.btn {
	background: rgb(0, 202, 237);
	color: #ffff;
}

.header {
	margin-bottom: 20px;
}


</style>
